<template>
  <div class="bird-wrapper">
    <div class="game" ref="game">
      <div class="sky" ref="sky"></div>
      <div class="land" ref="land"></div>
      <div class="bird swing1" ref="bird"></div>
      <div class="gameStart" v-show="!start">
        <div class="startBtn" @click="gameStart">开始游戏</div>
      </div>
      <div class="gameStart" v-show="gameOver">
        <div class="startBtn" @click="gameStart">重新开始</div>
      </div>
    </div>

    <p class="info">回车键开始/暂停，空格键跳跃</p>
  </div>
</template>

<script>
import birdGame from './bird-js/index'
export default {
  created() {
    this.initGame()
  },
  data() {
    return {
      bird: null,
      start: false
    }
  },
  computed: {
    gameOver() {
      if (this.bird) {
        return this.bird.gameOver
      } else {
        return false
      }
    }
  },
  methods: {
    initGame() {
      // 速度给-100就可以了
      // speed, skyDom, birdDom, landDom, gameDom
      this.$nextTick(() => {
        const gameDom = this.$refs.game
        const skyDom = this.$refs.sky
        const landDom = this.$refs.land
        const birdDom = this.$refs.bird
        const bird = new birdGame(-100, skyDom, birdDom, landDom, gameDom)
        this.bird = bird
        this.bird.regEvent()
      })
    },
    gameStart() {
      this.start = true
      this.bird.start()
    }
  }
}
</script>

<style lang="scss">
.bird-wrapper {
  margin-top: 20px;

  .game {
    width: 800px;
    height: 600px;
    border: 2px solid;
    margin: 0 auto;
    position: relative;
    overflow: hidden;

    .gameStart {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      background-color: #4ec0ca;

      z-index: 777;
      .startBtn {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 150px;
        height: 50px;
        line-height: 50px;
        border-radius: 20px;
        font-size: 20px;
        letter-spacing: 5px;
        font-weight: bolder;
        text-align: center;
        cursor: pointer;
        background-color: #fff;
      }
    }

    .sky {
      background: url('~@/assets/img/bird/sky.png');
      height: 100%;
      width: 200%;
      position: absolute;
      top: 0;
      left: 0;
    }
    .land {
      background: url('~@/assets/img/bird/land.png');
      height: 112px;
      width: 200%;
      position: absolute;
      left: 0;
      bottom: 0;
    }
    .bird {
      background: url('~@/assets/img/bird/bird.png');
      position: absolute;
      width: 33px;
      height: 26px;
      left: 150px;
      top: 150px;
    }
    .bird.swing1 {
      background-position: -8px -10px;
    }
    .bird.swing2 {
      background-position: -60px -10px;
    }
    .bird.swing3 {
      background-position: -113px -10px;
    }
    .pipe {
      position: absolute;
      height: 100px;
      width: 52px;
      left: 500px;
    }

    .pipe.up {
      background: url('~@/assets/img/bird/pipeDown.png');
      top: 0;
      background-position: bottom;
    }

    .pipe.down {
      background: url('~@/assets/img/bird/pipeUp.png');
      bottom: 112px;
    }
  }
}

.info {
  margin-top: 10px;
  color: #868686;
  text-align: center;
}
</style>
